<template>
  <van-nav-bar
    title="购物车"
    right-text="删除"
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />

  <div class="shooping">
    <div
      class="order"
      style="display: flex; align-items: center"
      v-for="(item, index) in HomeInfo.cartData"
    >
      <!-- <div class="shoop-item">
        <van-checkbox v-model="item.action_checked" />
      </div> -->
      <div @click="checkeds(item, index)">
        <div v-if="!item.action_checked" class="iconfont">&#xe619;</div>
        <div style="color: var(--baseColor)" v-else class="iconfont">
          &#xe610;
        </div>
      </div>
      <div class="order-but" style="">
        <div class="order-img">
          <img style="" :src="item.image" alt="" />
        </div>
        <div class="order-con">
          <div class="name">{{ item.goods_name }}</div>
          <div
            class="num"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div class="number">
              ￥{{ item.price / "100" }}
              <span>￥{{ item.stock / "100" }}</span>
            </div>
            <div class="num-right">
              <van-stepper
                min="0"
                :max="item.stock"
                :name="item"
                integer
                @change="numchange"
                v-model="item.buy_num"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="recom" style="text-align: center">
      <div style="color: #09b674">为你推荐</div>
    </div>
    <div
      class="shoppList"
      style="display: flex; justify-content: space-between; flex-wrap: wrap"
    >
      <div class="List-item" @click="go">
        <div class="List-img">
          <img src="../../imags/101.png" alt="" />
        </div>
        <div class="List-nr" style="font-size: 12px">
          直发 <span style="font-size: 12px">ecostore/ecostore</span> 椰子
          香草沐浴露400m
        </div>
        <div
          class="List-num"
          style="display: flex; justify-content: space-between"
        >
          <div class="left" style="font-size: 16px; color: rgb(252, 98, 23)">
            ￥108
          </div>
          <div class="right" style="font-size: 12px">98%的好评</div>
        </div>
      </div>
      <div class="List-item">
        <div class="List-img">
          <img src="../../imags/101.png" alt="" />
        </div>
        <div class="List-nr" style="font-size: 12px">
          直发 <span style="font-size: 12px">ecostore/ecostore</span> 椰子
          香草沐浴露400m
        </div>
        <div
          class="List-num"
          style="display: flex; justify-content: space-between"
        >
          <div class="left" style="font-size: 16px; color: rgb(252, 98, 23)">
            ￥108
          </div>
          <div class="right" style="font-size: 12px">98%的好评</div>
        </div>
      </div>
    </div>
    <div class="sett">
      <van-submit-bar
        :price="totaPrice"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <!-- <van-checkbox v-model="allChecked">全选</van-checkbox> -->
        <div>
          <div @click="allChecked = !allChecked">
            <div
              v-if="allChecked"
              style="color: var(--baseColor)"
              class="iconfont"
            >
              &#xe610;
            </div>
            <div v-else class="iconfont">&#xe619;</div>
          </div>
          全选
        </div>
      </van-submit-bar>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { showConfirmDialog } from "vant";
import {
  getCart,
  addCart,
  updateCart,
  deleteCart,
  createOrder,
} from "@/api/cart";
const num = ref();
const router = useRouter();
const value = ref(1);
const checked = ref(false);
// const price = ref(0);
const onSubmit = () =>
  router.push({
    name: "pay",
  });
const go = () =>
  router.push({
    name: "deta",
  });
const id = ref();
const onClickLink = () => showToast("修改地址");
const onClickRight = () => del();
// 数据存储
const HomeInfo = reactive({
  cartData: [],
  addCartDate: [],
});

// 修改数量和切换选中状态
function checkeds(item, index) {
  console.log(item.action_checked);
  HomeInfo.cartData[index].action_checked = !item.action_checked;
  update({ _id: item._id, action_checked: item.action_checked }).then((res) => {
    console.log(item._id);
    init();
  });
}
// 删除
function numchange(val, { name }) {
  console.log(val);
  console.log(name._id);
  if (val == 0) {
    showConfirmDialog({
      title: "",
      message: "确认全部删除吗？",
    })
      .then(() => {
        deleteCart({
          _id: name._id,
        }).then((res) => {
          if (res.code == 0) {
            showToast({
              message: res.msg,
              icon: "success",
            });
            init();
            console.log(res);
          }
        });
      })
      .catch(() => {
        update({
          _id: name._id,
          buy_num: 1,
        }).then((res) => {
          console.log(res);
          init();
        });
      });
  } else {
    update({
      _id: name._id,
      buy_num: val,
    }).then((res) => {
      console.log(res);
      init();
    });
  }
}

function update(data) {
  return updateCart(data);
}
// 总价钱
const totaPrice = computed(() => {
  let total = 0;
  HomeInfo.cartData.forEach((item) => {
    if (item.action_checked) {
      total += item.buy_num * item.price;
    }
  });
  return total;
});
// 删除
function del() {
  let list = HomeInfo.cartData.map((v) => {
    if (v.action_checked) {
      return v._id;
    }
  });
  console.log(list);
  showConfirmDialog({
    title: "",
    message: "确认全部删除吗？",
  })
    .then(() => {
      deleteCart({
        _id: list,
      }).then((res) => {
        if (res.code == 0) {
          showToast({
            message: res.msg,
            icon: "success",
          });
          init();
          console.log(res);
        }
      });
    })
    .catch(() => {});
}

const allChecked = computed({
  get() {
    return HomeInfo.cartData.every((v) => {
      return v.action_checked;
    });
  },
  set(val) {
    console.log(val);
    if (val) {
      let list = HomeInfo.cartData
        .filter((v) => {
          return !v.action_checked;
        })
        .map((v) => {
          return v._id;
        });
      update({
        _id: list,
        action_checked: val,
      }).then((res) => {
        console.log(res);
        init();
      });
    } else {
      let list = HomeInfo.cartData.map((v) => {
        return v._id;
      });
      update({
        _id: list,
        action_checked: val,
      }).then((res) => {
        console.log(res);
        init();
      });
    }
  },
});

// 购物车列表
function init() {
  // let price = 0
  Promise.all([getCart()]).then((res) => {
    let [cartDate] = res;
    if (cartDate.code == 0) {
      HomeInfo.cartData = cartDate.list;
    } else {
    }
  });
}

function order() {
  createOrder({
    mode: "buy",
    add_key: true,
    address_id: "65fbe53a6e5d2ddb514a71d2",
    cart_list: [
      {
        sku_id: "001-1",
        buy_num: 1,
        goods_id: "001",
      },
    ],
    buyer_remark: "备注",
  }).then((res) => {
    console.log(res);
  });
}

// 页面挂载运行
onMounted(() => {
  init();
});
</script>
<style>
.order {
  padding: 15px 20px;
  background: white;
  margin-bottom: 10px;
}

.name {
  /* width: 80%; */
  font-size: 13px;
}

.order-img img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  margin-right: 20px;
}

.ok,
.num {
  padding-top: 10px;
  text-align: right;
  font-size: 13px;
}

.num span {
  font-size: 14px;
}

.ok {
  padding: 0 10px;
}

.order-but {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.order-but {
  padding-top: 10px;
}

.number {
  font-size: 16px;
  color: #fc6217;
}

.number span {
  font-size: 12px;
  margin-left: 20px;
  color: #999999;
}

.shooping {
  background: #f4f4f4;
}

.recom {
  background: white;
  padding: 10px 0;
}

.List-item {
  width: 48%;
  padding: 10px 10px;
  margin-top: 10px;
  background-color: white;
}

.List-item img {
  width: 100%;
}

.van-nav-bar__title {
  color: #09b674;
}

.van-nav-bar__text {
  color: black;
}

.sett .van-submit-bar {
  position: fixed;
  bottom: 55px;
}
</style>
